---
title: 시작하기
description: Astro의 기본 소개.
i18nReady: true
tableOfContents: false
editUrl: false
next: false
banner:
  content: |
    <a href="https://astro.build/blog/astro-4/">Astro 버전 4.0이 출시되었습니다!</a>
    업그레이드할 준비가 되셨나요? <a href="/ko/guides/upgrade-to/v4/">업그레이드 안내서 읽기</a>
hero:
  title: Astro 공식 문서
  tagline: Astro를 사용하는 데 도움이 되는 안내서, 리소스, API 참조입니다.
  actions:
    - text: 시작하기
      icon: rocket
      link: /ko/install/auto/
      variant: primary
    - text: Astro의 기능에 대해 알아보세요
      icon: right-arrow
      link: /ko/concepts/why-astro/
  facepile:
    tagline: Astro 및 오픈 소스 기여자들이 제공합니다.
    linkText: 우리와 함께하세요!
    link: /ko/contribute/
---

import { CardGrid } from '@astrojs/starlight/components'
import Card from '~/components/Landing/Card.astro'
import ListCard from '~/components/Landing/ListCard.astro'
import SplitCard from '~/components/Landing/SplitCard.astro'
import Discord from '~/components/Landing/Discord.astro'

<CardGrid>
  <Card title="Astro로 무엇을 만들 것인가요?" icon="laptop">
   블로그, 포트폴리오, 문서, 랜딩 페이지, SaaS, 마케팅, 전자상거래 사이트 등을 위한 [Astro 스타터 테마](https://astro.build/themes/)를 살펴보세요!
  </Card>

  <Card title="안내서 살펴보기" icon="star">
    기본기를 학습하고 첫 번째 Astro 사이트를 만들려면 [블로그 만들기 튜토리얼](/ko/tutorial/0-introduction/)을 완료하세요.
  </Card>

  <SplitCard title="새 프로젝트 시작" icon="rocket">
    ```sh
    # npm으로 새 프로젝트 만들기
    npm create astro@latest
    ```
    
    [설치 가이드](/ko/install/auto/)에는 CLI 마법사를 사용하여 Astro를 설치하고, 기존 Astro GitHub 저장소에서 새 프로젝트를 생성하고, Astro를 수동으로 직접 설치하는 단계별 지침이 있습니다.
  </SplitCard>

  <ListCard title="배우기" icon="open-book">
    - [Astro의 주요 기능](/ko/concepts/why-astro/)
    - [아일랜드 아키텍처](/ko/concepts/islands/)
    - [Astro 컴포넌트](/ko/basics/astro-components/)
    - [Astro 템플릿 구문](/ko/basics/astro-syntax/)
  </ListCard>

  <ListCard title="확장하기" icon="puzzle">
    - [React 및 Tailwind와 같은 통합 추가](/ko/guides/integrations-guide/)
    - [타입 안정성을 갖춘 콘텐츠 컬렉션 만들기](/ko/guides/content-collections/)
    - [view transitions를 사용한 탐색 향상](/ko/guides/view-transitions/)
    - [헤드리스 CMS를 프로젝트에 연결](/ko/guides/cms/)
  </ListCard>
</CardGrid>

<Discord title="질문이 있거나 참여하고 싶으십니까?" cta="Discord에 참여하세요"/>
